<template>
  <div>
    <label v-if="label">{{label}}</label>
    <slot></slot>
    <div v-if="this.error">{{this.error}}</div>
  </div>

</template>

<script>
  import Schema from 'async-validator'
  export default {
    props:{
      label:{
        default:'',
        type:String
      },
      prop:{
        default:'',
        type:String
      },
    },
    data(){
      return {
        error:''
      }
    },
    inject:['form'],
    mounted(){
      this.$on("validate",()=>{
        this.validate()
      })
    },
    methods:{
      validate(){
        const rules=this.form.rules[this.prop]
        const value=this.form.model[this.prop]
        const desc={[this.prop]:rules}
        const schema=new Schema(desc)
        return schema.validate({[this.prop]:value},errors=>{
          console.log(errors)
          if(errors){
            this.error=errors[0].message
          }else{
            this.error=''
          }
        })
      }
    }
  }
</script>

<style>
</style>
